:root {
    /*GRAYSCALE*/
    --white: #ffffff;
    --gray100: #f3f3f3;
    --gray300: #d8d8d8;
    --gray400: #a4a4a4;
    --gray700: #888888;
    --gray900: #4d4d4d;
    --grayDark: #2a2a2a;
    --black: #131313;
    /*FEEDBACK*/
    --red300: #bf4829;
    --red400: #c23814;
    --orange400: #eb9300;
    /*BRAND*/
    --green400: #67b279;
    --green700: #4d995f;
    /*ADDITIONAL*/
    --purple400: #b267a0;
    --purple700: #994d87;
    --slateblue400: #677bb2;
    --slateblue700: #4d6199;
    /*EDITOR*/
    --green-editor: #338033;
    /* - dark mode*/
    --cyan-editor: #4093d6;
    --yellow-editor: #dbdb84;
    --pink-editor: #c46cbd;
    --orange-editor: #cf8263;
    --blueDark-editor: #264f78;
    /* - light mode*/
    --blue-editor: #4141e2;
    --brown-editor: #795e26;
    --purple-editor: #9e45b4;
    --red-editor: #a31515;
    /*FILTERING-LOG*/
    --regular-row-hover: var(--gray100);
    --regular-row-active: var(--gray300);
    --red-row: #ffd3c7;
    --red-row-hover: #ffb5a1;
    --red-row-active: #ff967b;
    --green-row: #dcffe5;
    --green-row-hover: #c3ffd1;
    --green-row-active: #a9ffbe;
    --orange-row: #ffe4b7;
    --orange-row-hover: #ffdda5;
    --orange-row-active: #ffcf7d;
    /*FILTERING-LOG-DARK*/
    @media (prefers-color-scheme: dark) {
        --regular-row-hover: #2f2f2f;
        --regular-row-active: #3b3b3b;
        --red-row: #46231a;
        --red-row-hover: #692d1e;
        --red-row-active: #7a3320;
        --green-row: #2c4332;
        --green-row-hover: #3d6246;
        --green-row-active: #457250;
        --orange-row: #4d350d;
        --orange-row-hover: #61410B;
        --orange-row-active: #744c0a;
    }

    --switch-btn-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
    --swamp: #547b88;
    /*GRADIENTS*/
    --switch-field-enabled: linear-gradient(90deg, #67B279 0%, #39774C 100%);
    --switch-field-disabled: linear-gradient(90deg, #732613 0%, #BF4829 100%);

    --greyf7: #f7f7f7;
    --gray05: rgba(239, 239, 239, 0.5);
    --greye7: #e7e7e7;
    --gey6a: #d1d1d1;
    --grayd8: var(--gray700);
    --grey78: #787878;
    --gray-base: var(--gray900);
    --gray4a: #4a4a4a;
    --gray88: var(--gray700);
    --green74: #66b574;
    --green86: #68bc86;
    --green75: #5ba575;
    --red23: #F66F23;
    --t3: 0.3s ease;
    --overlay-gray: rgba(137, 137, 137, 0.5);
    --light-shadow: rgba(0, 0, 0, 0.05);
    --sidebar-transition: 0.3s ease;
    --z-idx5: 5;
    --z-idx6: 6;
    --z-idx7: 7;
    --z-idx8: 8;
}

.dark-mode {
    --regular-row-hover: #2f2f2f;
    --regular-row-active: #3b3b3b;
    --red-row: #46231a;
    --red-row-hover: #692d1e;
    --red-row-active: #7a3320;
    --green-row: #2c4332;
    --green-row-hover: #3d6246;
    --green-row-active: #457250;
    --orange-row: #4d350d;
    --orange-row-hover: #61410B;
    --orange-row-active: #744c0a;
}

.light-mode {
    --regular-row-hover: var(--gray100);
    --regular-row-active: var(--gray300);
    --red-row: #ffd3c7;
    --red-row-hover: #ffb5a1;
    --red-row-active: #ff967b;
    --green-row: #dcffe5;
    --green-row-hover: #c3ffd1;
    --green-row-active: #a9ffbe;
    --orange-row: #ffe4b7;
    --orange-row-hover: #ffdda5;
    --orange-row-active: #ffcf7d;
}
